<template>
  <div
    class="auto-1632211451080 m-layer z-show"
    :style="{ top: pageY, left: '350px' }"
    v-if="isshow"
  >
    <div class="zbar">
      <div class="zttl f-thide">{{title}}</div>
    </div>
    <div class="zcnt">
      <transition mode="out-in" name="fade">
        <component :is="componentId"></component>
      </transition>
    </div>
    <span class="zcls" @click.stop="close">×</span>
  </div>
</template>
<script>
export default {
    data() {
        return {
            isshow:false,
            title:'登录',
            coms:[
                {com :'QRcode' , title:'登录'},
                {com :'login_list' , title :'登录'},
                {com :'phone' , title :'手机号登录'},
                {com :'reset' , title :'重设密码'},
                {com :'register' , title :'手机号注册'}
             ],
             componentId :'QRcode',
        }
     },
       components:{
       QRcode:() => import("./login_com/QRcode.vue"),
       login_list: () => import("./login_com/login_list.vue"),
       phone:() => import("./login_com/phone.vue"),
       reset: () => import("./login_com/reset.vue"),
       register :() => import("./login_com/register.vue")
    },
    methods: {
        show(Y ,select) {
        //显示登录框
        this.isshow = true;
        this.pageY = Y + "px";
          if(select){
            this.changeView(select)
          }
        },
        changeView(num){
          this.componentId = this.coms[num].com
          this.title =  this.coms[num].title
        },
        close(){
         this.isshow = false
         this.componentId = 'QRcode'
        }
    },
};
</script>
<style scoped>
div.m-layer {
  position: absolute;
  z-index: 9998;
  width: 530px;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
  border: none;
  background: #fff;
}

 div.m-layer .zcls {
  position: absolute;
  z-index: 20;
  top: 16px;
  right: 20px;
  width: 10px;
  height: 10px;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  background: url("https://s2.music.126.net/style/web2/img/layer/layer_8.png?12c21fe96526f1f826282cccc21c5b14")
    no-repeat 0 9999px;
  background-position: 0 -95px;
} 
div.m-layer .zbar {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid #191919;
  border-radius: 4px 4px 0 0;
  background: #2d2d2d;
}
div.m-layer .zttl {
  padding-right: 45px;
  margin: 0;
  height: 38px;
  line-height: 38px;
  padding-left: 18px;
  border-radius: 3px 3px 0 0;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background-position: 50% 0;
  text-align: left;
} 
div.m-layer div.zcnt {
    padding: 0;
    
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>